\iffalse

{} == {}
{} === {}


undefined and null


*args, **kwargs

default values

keyword arguments


\fi




\documentclass{beamer}


% \usepackage{pgfpages}
% \pgfpagesuselayout{2 on 1}[a4paper,border shrink=5mm]


\newcommand\mypause{\pause}
\newcommand\task{\par\noindent\textbf{Task\ \ }}
\renewcommand\solution{\par\mypause\textbf{Solution\ \ }}

\newcommand\JS{JavaScript}
\newcommand\this{\texttt{this}}

\title{\JS\ for Python programmers}
\author{Jonathan Fine}
\date[]{EuroPython tutorial\\[10pt]28 June 2009}


\begin{document}


% \let\mypause\relax

\advance\parskip 3pt

%% Titlepage
\begin{frame}
\titlepage
\end{frame}

%% Contents
\begin{frame}
\frametitle{Contents}
\tableofcontents
\end{frame}

\section{Introduction}
\begin{frame}

\frametitle{Introduction}

This tutorial focuses on \JS\ as a programming language, and on
helping Python programmers feel at home with \JS.

There's little on the document DOM and web-page applications.  Both of
these require (useful) special knowledge of other things.

First, we compare the culture and main features of \JS\ and Python,
and then look at a generic event handling project, so that we have an
example in mind.

\task  Are there other examples you'd like us to look at?

We then cover some of the deeper language features, finishing
with \texttt{this}, inheritance and closures.

We don't cover the program flow control features, such
as \texttt{if}, \texttt{for}, \texttt{switch} and \texttt{throw}.

The aim is to help with the difference of culture at the level of
thinking, planning and organising.

There's a special focus on modules in Python and \JS.
\end{frame}


\section{Python and \JS\ compared}

\begin{frame}[fragile]
\frametitle{About Python}
 
Started by Guido van Rossum in 1990.  Stable and mature.  Managed by
Python Software Foundation.

\begin{itemize}
\item Used by choice (of programmer).  Scales to large systems.
\item Used in many areas --- such as web servers, scientific calculation,
 system administration, GUI programs, testing.
\item Open source, and all C-implementations use same codebase.
\item Very high-level, gives programmer productivity.
\item Friendly, wise and intelligent developer community.
\item Clean and simple (although unusual) syntax.
\item Moving to Python~3, to allow major language clean-up.
\end{itemize}
\end{frame}


\begin{frame}[fragile]
\frametitle{About \JS}

Started by Brendan Eich in 1995.  Key design from Scheme and Self
(giving inheritance).  Name due to marketing tie-up with Sun.

\begin{itemize}
\item Used because it's all there is on the browser. Doesn't scale.
\item Major use is web-browsers (and closely related areas, such as Flash).
\item Major implemention (Microsoft) is proprietary.
\item Lightweight, inflexible programmers interface.
\item Microsoft's hostility to Netscape (browser wars) still has consequences.
\item Complex syntax, with serious gotchas.
\item Progress to fourth edition of standard abandoned in August 2008
and compromise made.

\end{itemize}

But don't blame \JS\ for the problems with the DOM.  Any browser
scripting language would have problems here.

\

\end{frame}


\begin{frame}[fragile]
\frametitle{Python --- modules, library and documentation}

These are important strengths of Python.

\begin{itemize}

\item
Python has a module structure.  For example,
file \texttt{wibble.py} can be imported to provide the
module \texttt{wibble}.

\item
Modules can be organised into packages.

\item
Modules can be byte-compiled.

\item
Python has a large and growing standard library.

\item
Many Python applications and frameworks rely on the standard
library.

\item
There are other library modules available.

\item
Python has high-quality documentation, in both HTML and PDF form.

\end{itemize}



\end{frame}


\begin{frame}[fragile]
\frametitle{\JS\ --- modules, library and documentation}

There are major weaknesses in \JS.

\begin{itemize}

\item
\JS\ does not have an inbuilt concept of a module
(although \texttt{module} is a language reserved word).

\item
 \JS\ does not have a standard library of \JS\ code (although there
 are widely used `modules', e.g.~for JSON).

\item
In \JS\ `library' often means `large package with some optional
parts'.

\item
These libraries don't share much code, and sometimes don't play well
with each other.  Sizzlejs is example of progress.

\item
Documentation is sporadic and not to a shared standard.

\end{itemize}


Note: The serverjs project is working on providing modules for
JavaScript, and the author has a prototype Jsmod system.
\end{frame}


\begin{frame}[fragile]
\frametitle{\JS\ resources}

Here's an incomplete and perhaps biased list.

\begin{itemize}
\item Wikipedia, for general introductions and overview.
\item 
Cockcroft's \emph{\JS, the good parts} and Flanagan's \emph{\JS: The
Definitive Guide}.
\item \texttt{https://developer.mozilla.org/en/JavaScript}.
\item Libraries such as jQuery and Dojo.
\item Many presentations on slideshare.
\item John Resig's (jQuery developer) blog: http://ejohn.org.
\item \texttt{http://dean.edwards.name/} for high-quality pushing the boundary.
\item \texttt{http://ajaxian.com/} for developer news on Ajax.
\item JavaScript FAQ
\item For DOM, \texttt{http://www.quirksmode.org/}
\item Js4py, a small group of Python users who also do JavaScript.
\item This talk (js4py on Google code SVN, sandbox/jfine).
\end{itemize}

\end{frame}

\begin{frame}[fragile]
\frametitle{\JS\ remedies}

We've seen that \JS\ has problems as a programming environment.  Here
we look at some work done to improve matters.

\begin{itemize}

\item 
Libraries such as Dojo and jQuery (but they still don't have
modules).

\item
Code to run on server, and treat browser as fairly dumb device
(Ruby-on-Rails, I think).

\item
Google Web Toolkit --- a whole browser-client development environment
(in Java) that compiles to browser Java and client JavaScript.

\item
Pyjamas, which is similar to GWT but for Python.

\item
Running \JS\ on both browser and server (serverjs), to avoid coding algorithm twice, in two different languages.

\item
JSON (and XML), which work the same on all platforms.

\item 
Jsmod, which provided modules for JavaScript (currently prototype
only).

\end{itemize}

\end{frame}


%%
\section{Generic event handling project}

\begin{frame}[fragile]
\frametitle{Generic event handling --- motivation}

Here's how to attach event handler function to nodes, using jQuery:
\begin{verbatim}
  jQuery(selector).onclick(fn);
\end{verbatim}

Sometimes, we need something more powerful, particularly if attached
to each node there is data, which can change.
\begin{itemize}
\item Event handling to be property of data is simpler (and more Pythonic).
\item Wish to handle generated events, such as from user interface 
or server. Event may change attached data.
\item Wish to attach one handler object rather than many functions.
\item Wish to separate `event-normalisation' from event handling.
\end{itemize}

We can attach an onclick handler to the document body and have it
handle all clicks.  The browser looks `up the document tree' for
handlers.

\task Does this fit in with any of your projects?

\ 
\end{frame}


\begin{frame}[fragile]
\frametitle{Generic event handling --- \texttt{process\_event}}

Doing the browser/DOM part of this requires special (and very useful)
knowledge that is not part of this tutorial.  

We'll focus on the pure \JS\ part.  Aim is to
define \texttt{process\_event} function and sample event handler
classes.

First task is to define:

\begin{verbatim}
    process_event(node, type, args);
\end{verbatim}

so that if node has \texttt{handler} attribute, and handler has
a \verb|'on' + type| attribute, then call this attribute with the
arguments (which might be mouse location, keystroke information as
well as node and type).

 \task Review this specification and sketch a Python implementation
(we'd like to be able to continue to think in Python).

\end{frame}


\begin{frame}[fragile]
\frametitle{Generic event handling --- coding handlers}

Wish to create event handling objects that
\begin{itemize}
\item can store data.
\item can change the stored data.
\item respond to events such as \texttt{onclick}
 and \texttt{onchange}.
\item interface nicely with \texttt{process\_event}.
\item can be easily tested (stand-alone preferred).
\end{itemize}

Suggested interface is
\begin{verbatim}
    var handler = Handler('apples', 12);
    node.handler = handler;
    [...]
    process_event(node, 'click', x, y);
    // and result should be something like
    handler.onclick(node, 'click', x, y);
\end{verbatim}


\end{frame}


%% Equality
\section{Equality}
\begin{frame}[fragile]
\frametitle{Equality in JavaScript --- transitivity}

JavaScript has \verb|==| and \verb|===| operators.  It helps to know
the difference between them.  So let's try them out.

The \verb|==| operator has unusual properties.  Here's an example:
\begin{verbatim}
    js> '0' == 0
    true
    js> 0 == ''
    true
    js> '0' == ''
    false
\end{verbatim}

Do you see.  The \verb|==| equality operator is not transitive!

\task Justify this behaviour, as best as you can.
\end{frame}


\begin{frame}[fragile]
\frametitle{Equality in JavaScript --- booleans}


Here's another example of \verb|==|
\begin{verbatim}
    js> 0 == false
    true
    js> '0' == false
    true
    js> '' == false
    true
    js> false ? 'true': 'false';
    false
    js> 0 ? 'true': 'false';
    false
    js> '0' ? 'true': 'false';
    true
\end{verbatim}

\task Justify this behaviour, as best as you can.
\end{frame}


\begin{frame}[fragile]
\frametitle{Equality in JavaScript --- use \texttt{===} and \texttt{!==}}

JavaScript also has \verb|===| and \verb|!==| operators.  

They behave how you (Python programmers) expect.

Use them.  Always.

Don't ever use the \verb|==| and \verb|!=| operators.  Pretend that
they don't exist.

Assume (I've not checked) that the language originally had only the
\verb|==| and \verb|!=| operators.

\task If so, why do you think the new operators were introduced?

\task And if so, why were they \emph{added} to the language (instead
of \emph{replacing} the \verb|==| and \verb|!=| operators)?

\task What does this tell us about the evolution of the JavaScript
language?
\end{frame}



%%%%
\section{Strings}
\begin{frame}[fragile]
\frametitle{Silent conversion to strings --- addition}

JavaScript is fond of strings.  They're a simple and uncomplicated
data type.  It silently converts other types of objects to strings
when it needs to (instead of throwing an exception).

Here's an example of a resulting gotcha:
\begin{verbatim}
    js> x = '1'
    1
    js> x + 2 + 3
    123
    js> x + (2 + 3)
    15
\end{verbatim}

\task How would you defend against this gotcha?

\solution The best I can come up with is to make the conversion
explicit by starting with an empty string:
\begin{verbatim}
    js> '' + x + 2 + 3
\end{verbatim}
\end{frame}

\begin{frame}[fragile]
\frametitle{Silent conversion to strings --- keys}

Silent conversion takes place when looking up keys.

\begin{verbatim}
    js> j = {}
    [object Object]
    js> j[0] = 'hi'
    hi
    js> j['0']
    hi
    js> j['0'] = 'ho'
    ho
    js> j[0]
    ho
\end{verbatim}

\task All keys are strings.  Can you live with this?

\end{frame}



\begin{frame}[fragile]
\frametitle{Silent conversion to strings --- a key puzzle}

As well as numbers and strings, objects can be used as keys.  Unlike Python, the object doesn't have to be hashable.

Any object can be used.  But it is silently converted to a string when
it is used as a key.

\begin{verbatim}
    js> j = {}
    [object Object]
    js> s = {}
    [object Object]
    js> j[s] = 'puzzle'
    puzzle
\end{verbatim}

\task What string \verb|x| is the key that retrieves the string
\verb|puzzle|?

\solution
\begin{verbatim}
    js> j['[object Object]']
    puzzle
\end{verbatim}
\end{frame}


\section{The \this\ keyword and object}

\begin{frame}[fragile]
\frametitle{The \this\ object and the global object}


The `current object' can be accessed using the keyword \this.  It's a
bit like \texttt{self} in Python, and crucial to object-oriented
programming.  But there are big differences.

At the top-level \this\ is the global object.

\begin{verbatim}
    js> this
    [object global]
    js> this.x = 1
    1
    js> x
    1
    js> y = 2
    2
    js> this.y === 2
    true
    js> 
\end{verbatim}
\end{frame}


\begin{frame}[fragile]
\frametitle{The \this\ object in `unbound' function calls}

In SpiderMonkey get the global object.

\begin{verbatim}
    js> f = function(){return this}
    function () {
        return this;
    }
    js> f()
    [object global]
    js> 
\end{verbatim}

In Firefox 3.0.10, get the Window object.
\begin{verbatim}
    >>> f = function(){return this}
    function()
    >>> f()
    Window about:blank
\end{verbatim}

\end{frame}


\begin{frame}[fragile]
\frametitle{The \this\ object in `bound' function calls}

In `bound' function calls we get the bound object.

\begin{verbatim}
    js> j = {}
    [object Object]
    js> j.f = function(){return this}
    function () {
        return this;
    }
    js> j.f() === j
    true
\end{verbatim}

But, unlike Python, the binding is transient!
\begin{verbatim}
    js> tmp = j.f
    [...]
    js> tmp()
    [object global]
\end{verbatim}

\end{frame}

\section{Setting \this\ and arguments --- \texttt{call} and \texttt{apply}}

\begin{frame}[fragile]
\frametitle{The \this\ object in \texttt{call} and \texttt{apply}}

We can set the \this\ object on-the-fly, by using \texttt{call} and
\texttt{apply} (which differ in how they handle further arguments).

\begin{verbatim}
    js> f = function(){return this}
    function () {
        return this;
    }
    js> j = {}
    [object Object]
    js> f.call(j) === j
    true
    js> f.apply(j) === j
    true
\end{verbatim}

\task Write something like \texttt{call} (and \texttt{apply}) without
using these features.

\end{frame}

\begin{frame}[fragile]
\frametitle{Rough emulation of \texttt{call} and \texttt{apply}}

\task Write something like \texttt{call} (and \texttt{apply}) without
using these features.

\solution Here's what I've come up with:

\begin{verbatim}
    callit = function(fn, obj){
        var value;
        obj.tmp = fn;
        value = obj.tmp();
        delete obj.tmp;
        return value;
    }
\end{verbatim}

\task Describe the gotcha's in using this function.


\end{frame}

\section{Scope and closures}

\begin{frame}[fragile]
\frametitle{Scope chain in Python}

In Python, scope is Local -- Module -- Builtin.

\begin{verbatim}
    >>> len
    <built-in function len>
    >>> len = 4  # Makes assignment in __main__ module.
    >>> len
    4
    >>> def f(): len = 5; return len; # Assign to local.
    ... 
    >>> f()      # Fetches the local value in f.
    5
    >>> len      # The module value is still there.
    4
    >>> del len  # No longer mask the builtin value.
    >>> len      # The builtin value is still there.
    <built-in function len>

\end{verbatim}
\end{frame}

\begin{frame}[fragile]
\frametitle{Scope chain in \JS}

In JavaScript, scope chain is Function -- Global, and it requires
\texttt{var} declarations. (Warning: \JS\ doesn't have block scope.)

\begin{verbatim}
    js> x = 0
    0
    js> f = function(){return x}; f() === 0;
    true
    js> f = function(){var x=1; return x}; f() === 1;
    true
\end{verbatim}

But don't drop the \texttt{var} declaration, other we make problems.
\begin{verbatim}
    js> f = function(){y=1; return y}; f() === 1;
    true
    js> y === 1;  // We've created (or changed) a global.
    true
\end{verbatim}
\end{frame}



\begin{frame}[fragile]
\frametitle{Closures in \JS}

Closures (from Scheme) are one of the most powerful features in the
language.  Python also has closures (since 2.0, as I recall).

\begin{verbatim}
    js> make_get_set = function(){
        var obj;
        return [function(){return obj}, 
            function(val){obj = val}];
    }
    [...]
    js> tmp = make_get_set(); get = tmp[0]; set = tmp[1];
    [...]
    js> set(4)    // get and set refer to var obj.
    js> get()
    4
\end{verbatim}

\task What happens if we omit the \texttt{var} in definition of
\verb|make_get_set|?

\end{frame}


\begin{frame}[fragile]
\frametitle{Using closures (especially with the DOM) --- don't do this}

It is common to add onclick and other call-back functions to document
elements.  Simple example: click to be told index in list.

\begin{verbatim}
    // Don't follow this example - it's broken.
    var i;
    [...]
    nodes[i].onclick = function(){
        alert('This is node ' + i);
    }
    [...]
\end{verbatim}

\task Why and how is this broken?

\solution All the functions are effectively the same, and all bind to
same instance of the variable \texttt{i}.  And so each node gives same alert when clicked (namely value of \texttt{i} at function exit).

\end{frame}

\begin{frame}[fragile]
\frametitle{Using closures (especially with the DOM) --- do this}

Problem: onclick function to be told index in list.

First we need a helper function, that returns the onclick function.
\begin{verbatim}
    var make_alert = function(i){
       return function(){
           alert('This is node ' + i);
       };
    }
\end{verbatim}

Now we use the helper function.
\begin{verbatim}
    var i;
    [...]
    nodes[i].onclick = make_alert(i);
\end{verbatim}

\task Refactor this code so that the helper function is inline.

\task Describe pros and cons of external and inline helper function.
\end{frame}

\section{Inheritance}

\begin{frame}[fragile]
\frametitle{Inheritence --- the prototype tree}

Every object (bar one) has an internal pointer to its prototype
object.  This pointer is set when the object is created, and cannot
then be changed.  Any object can serve as a prototype object.

The prototype pointers organise all objects into a tree, whose root is
stored at \texttt{Object.prototype}.

\begin{verbatim}
    js> root = Object.prototype
    [object Object]
    js> j = {}
    [object Object]
    js> j.x === undefined  // j has no x.
    true
    js> root.x = 4  // Example only - don't do this!
    4
    js> j.x === 4   // As j has no x, look in chain.
    true
\end{verbatim}

\end{frame}




\begin{frame}[fragile]
\frametitle{Inheritance --- setting the pointer}

The prototype pointer is set when the object is created.

To allow us to explore, here's a function that creates an object that
points to a given object.
\begin{verbatim}
    js> create = function(prototype){
        var fn = function(){};
        fn.prototype = prototype;
        return new fn(); 
    }
\end{verbatim}

Note: We don't have to understand \JS\ keyword \texttt{new} to
understand \texttt{create}.  All we need for now is:

\begin{verbatim}
    a  = create(b); // Creates 'a' that points to 'b'.
\end{verbatim}

\task From code above, describe what \texttt{new} does.  Compare to reality.

\end{frame}




\begin{frame}[fragile]
\frametitle{Inheritance --- Python rectangles}

In Python, to define plane rectangle class:
\begin{verbatim}
class Rectangle(object):
    def __init__(self, lx, ly, tx, ty):
       # lx is lower left x co-ordinate, etc.
       self._data = (lx, ly, tx, ty)
    def area(self):
       data = self._data
       return (data[2] - data[0]) * (data[3] - data[1])
\end{verbatim}

To use it
\begin{verbatim}
    rect = Rectangle(0, 3, 1, 4)
    x = rect.area()
\end{verbatim}

\task What other methods would you add?

\solution Perhaps \verb|perimeter|, \verb|__str__|, \verb|__eq__|,
\verb|__lt__| (for contains).  Perhaps make \texttt{area} and
\texttt{perimeter} properties.

\ 
\end{frame}


\begin{frame}[fragile]
\frametitle{Inheritance --- \JS\ rectangles via \texttt{create}}

Here's one way. First, we need a prototype object.
\begin{verbatim}
    var rect = {};  // Inherit from Object.
\end{verbatim}

Then we'll need a constructor (similar to \verb|__init__|).
\begin{verbatim}
    var Rectangle = function(lx, ly, tx, ty){
       var obj = create(rect);
       obj._data = [lx, ly, tx, ty];
       return obj;
    }
\end{verbatim}


And we'll need methods, which we add to the prototype object.
\begin{verbatim}
    rect.area = function(){
       data = this._data;
       return (data[2] - data[0]) * (data[3] - data[1]);
    };
\end{verbatim}

\task Understand why this works.

\ 
\end{frame}

\begin{frame}[fragile]
\frametitle{Inheritance --- \JS\ rectangles via \texttt{new}}

Here's the traditional way.  First we define a constructor.
\begin{verbatim}
    var Rectangle = function(lx, ly, tx, ty){
       this._data = [lx, ly, tx, ty];
    }
\end{verbatim}

\emph{Every} \JS\ function is given a \texttt{prototype} object, to
which we can add attributes.  Here we use same function as before.
\begin{verbatim}
    Rectangle.prototype.area = function(){
       data = this._data;
       return (data[2] - data[0]) * (data[3] - data[1]);
    };
\end{verbatim}

\task Understand the difference between
\begin{verbatim}
    var x = Rectangle(0, 3, 1, 4);
    var x = new Rectangle(0, 3, 1, 4);
\end{verbatim}

\ 
\end{frame}


\begin{frame}[fragile]
\frametitle{Inheritance --- \texttt{new} and \texttt{create} compared}

\textbf{create(proto);} creates and returns an object whose internal
prototype pointer point to \textbf{proto}.

\textbf{fn(a, b, c);} calls \textbf{fn} with arguments a, b, c.  But
note: inside \textbf{fn} the keyword \emph{this} is set to a global
object.

\textbf{new fn(a, b, c);} is like \texttt{fn(a, b, c)} except:
(1)~inside \textbf{fn}, \emph{this} is effective set to the new object
\texttt{create(fn.prototype)}; and (2)~if \textbf{fn} returns an
object then the \textbf{new} call returns that object; and
(3)~otherwise the \textbf{new} call returns the created object.

The function \texttt{create} is simpler to understand than the
language primitive \texttt{new}.  I think \texttt{new} was introduced
to make Java programmers feel at home in \JS.

\task Discover the gotcha's and glitches in new and create.

%% Expand to a second slide.  create is not standard.
\solution My itches: (1)~Forget the \texttt{new} and you initialise a
global object.  Your code might appear to work until you create a
second object.  (2)~You have two sorts of functions --- those that
should be called with a \texttt{new} and those that should not.
\ 
\end{frame}


\section{Jsmod --- modules for \JS}

\begin{frame}[fragile]
\frametitle{About Jsmod}

Arose out of my frustration in writing modular \JS, as part of 2008
Google Summer of Code.

Basic idea: follow the module structure provided by Python, with the
adaptions necessary due to \JS\ not being Python.  Allow Python users
to feel at home with the module system.

\begin{itemize}

\item Automatically handles dependencies.
\item For efficient deployment needs build system.
\item SVN mime-type provides instant deployment (idea due to Dean Edwards).
\item Used to develop much of the mathtran-javascript code.
\item Proved its worth (to me).
\item Basic design and features now stable.
\end{itemize}
\end{frame}

\begin{frame}[fragile]
\frametitle{Jsmod --- sample code (for next version)}

\begin{verbatim}
jsmod.define(function(env){
var i = env.imp( // Template code.
[   // The imports go here, and initialise i.
    ['fruit, 'Apple'],  // Python: from fruit import Apple
    ['veg', 'Carrot Potato'] // Multiple import.
]};
// Module initialiser goes here.
env.body(function(m)  // Template: m is the module
{
    m.apple = i.Apple(3);  // Python: apple = Apple(3) 
    var rect = m.Class('Rect'); // Python: class Rect ...
    rect.__init__ = function(lx, ly, tx, ty){
        this._data = [lx, ly, tx, ty];
    };
});  // End of body  
});  // End of module

\end{verbatim}
\end{frame}


\begin{frame}[fragile]
\frametitle{Jsmod --- how it works}

First, the overall structure of a Jsmod source file.
\begin{itemize}
\item Module content is of form \texttt{jsmod.define(mod\_fn)}.
\item \texttt{mod\_fn} is defined inline, and has parameter \texttt{env}.
\item \texttt{mod\_fn} contains call to \texttt{env.imp}
to  initialise \texttt{i}.
\item \texttt{mod\_fn} contains call to env.body(body\_fn).
\item \texttt{body\_fn} is defined inline, and has parameter \texttt{m}.
\end{itemize}

We now, roughly speaking, define \texttt{jsmod.define} so that it
\begin{itemize}
\item 
First runs \texttt{body\_fn(env)} with \texttt{env.imp} that picks up data
from import list (and \texttt{env.body} does nothing).
\item Gets everything we need from the import list.
\item
Then reruns \texttt{body\_fn(env)}, with \texttt{env.imp} that
initialises module.
\begin{itemize}
\item Use \texttt{env.imp} that initialise import object \texttt{i}.
\item Construct a module object \texttt{m} and pass it to \texttt{env.body}.
\item Module object \texttt{m} to have \texttt{Class} (and other) methods.
\end{itemize}
\end{itemize}

\end{frame}


\end{document} %%%%%%%%%%

\begin{verbatim}
    js> f = function(){} function () { } js> f.x === 4 true
\end{verbatim}






\begin{verbatim}
    js> j = {};
    [object Object]
    js> s = create(j);
    [object Object]
    js> j.y = 4;
    4
    js> s.y
    4
\end{verbatim}





\begin{frame}[fragile]
\frametitle{\ddt}

\begin{verbatim}
\end{verbatim}

\task 
\end{frame}



\frame
{
  \frametitle{Features of the Beamer Class}

  \begin{itemize}
  \item<1-> Normal LaTeX class.
  \item<2-> Easy overlays.
  \item<3-> No external programs needed.      
  \end{itemize}
}


